<template>
  <NoResource v-if="isShow" />
  <NuxtLayout v-else-if="post" name="content">
    <HtmlShow class="html-show" v-if="post?.content" container="#postbody .v-note-panel .v-note-show .v-show-content" />
    <n-space vertical class="postfind">
      <article ref="postbody">
        <n-space :size="20" vertical class="postheader alignCenter">
          <h1 class="posttitle">
            {{ post?.title }}
          </h1>
          <n-space :size="[20, 0]">
            <div>
              {{ $dayjs(post?.createTime).format("YYYY年MM月DD日") }}
            </div>
            <div>阅读：{{ post?.count }}</div>
          </n-space>
        </n-space>
        <!-- <span v-html="post?.contentHtml" /> -->
        <client-only>
          <MarkdownOnlyRead id="postbody" class="MarkdownOnlyRead" v-if="post?.content" :text="post?.content"
            :navigation="false" :boxShadow="false" :readmodel="false" :toolbarsFlag="false" />
        </client-only>
      </article>
      <n-space class="alignCenter" justify="space-between">
        <div>
          最后编辑于：{{ $dayjs(post?.updateTime).format("YYYY年MM月DD日") }}
        </div>

        <n-space class="alignCenter">
          <n-icon size="20">
            <Pricetags />
          </n-icon>
          <template v-for="(item, index) in post?.tags" :key="index">
            <n-button quaternary round type="primary">
              {{ item.name }}
            </n-button>
          </template>
        </n-space>
      </n-space>
      <Comments @createAfter="createAfter" />
      <CommentsShow ref="commentsShow" />
    </n-space>
  </NuxtLayout>
</template>

<script setup lang="ts">
import { NSpace, NButton, NIcon } from "naive-ui";
import { findById as apiFindOneById, type Posts } from "../../api/post";
import { Pricetags } from "@vicons/ionicons5";
const route = useRoute();
const post = ref<Posts>();
const isShow = ref(false);
const getPost = async (id: string) => {
  const res = await apiFindOneById(id);
  if (res?.data) {
    post.value = res.data;
    useHead({
      title: post.value.title ?? "文章详情", //网站标题
    });
  } else {
    isShow.value = true;
  }
};
const commentsShow = ref();
const createAfter = () => {
  commentsShow.value.getComment();
};
getPost(route.params.id as string);

</script>
<style lang="scss" scoped>
.html-show {
  position: fixed;
  left: 2.5%;
  width: 20%;
}

.postfind {
  background-color: #fbfbfb;
  border-radius: 5px;
  padding: 10px 20px;
  margin-left: 20%;
}

.alignCenter {
  align-items: center;
}

.postheader {
  // margin: 20px 0;
  padding: 20px 25px;
}

.posttitle {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .html-show {
    display: none;
  }

  .postfind {
    margin: 0;
  }
}
</style>
